<template>
    <div>
      <Main_header></Main_header>
      <!--全部商品图片展示-->
      <div class="common">
        <div class="content">
          <!--全部商品图片展示-->
          <div class="contentImg">
            <div class="title">
              <h2>商铺详情</h2>
            </div>
            <div class="goodcontent">
              <div class="goodleft">
                <el-row>
                    <el-card :body-style="{ padding: '0px' }">
                      <img :src="store.storePic" class="image">
                      <div style="padding: 14px;">
                        <span>联系电话:{{store.officePhone}}</span>
                        <div class="bottom clearfix">
                          <div class="times">地址:{{ store.detailAddress }}</div>
                          <div class="times">描述:{{ store.description }}</div>
                          <div class="times" style="color: darkorange">评分:{{ store.score }}</div>
                          <el-button type="text" class="button">操作按钮</el-button>
                        </div>
                      </div>
                    </el-card>
                </el-row>
              </div>
              <div class="goodright">
                <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="全部" name="allGood">
                    <div>
                      <el-row>
                        <el-col :span="8" v-for="(good,index) in goodList" :key="index">
                          <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img :src="good.imgurl" @click="toDetail(good,index)" style="width: 90%;margin-top: 10px;margin-left:14px;height: 250px">
                            <div style="padding: 14px">
                              <span class="messages">{{good.goodName}}</span>
                              <span class="description">{{good.description}}</span>
                              <div class="bottom clearfix">
                                <div class="good-item">
                                  ￥{{good.rentPriceHour}}/小时~￥{{good.rentPriceDay}}/天
                                </div>
                                <!--<el-button type="text" class="button">操作按钮</el-button>-->
                              </div>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                    <div>
                      <!--分页条-->
                      <div style="width: 50%; margin: 0 auto">
                        <el-pagination
                          class="pagination"
                          style="padding-top: 15px"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="current"
                          :page-sizes="[6, 10, 20, 30]"
                          :page-size="size"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total">
                        </el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="价格" name="goodPrice">
                    <div>
                      <el-row>
                        <el-col :span="8" v-for="(good,index) in goodList" :key="index">
                          <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img :src="good.imgurl" @click="toDetail(good,index)" style="width: 90%;margin-top: 10px;margin-left:14px;height: 250px">
                            <div style="padding: 14px">
                              <span class="messages">{{good.goodName}}</span>
                              <span class="description">{{good.description}}</span>
                              <div class="bottom clearfix">
                                <div class="good-item">
                                  ￥{{good.rentPriceHour}}/小时~￥{{good.rentPriceDay}}/天
                                </div>
                                <!--<el-button type="text" class="button">操作按钮</el-button>-->
                              </div>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                    <div>
                      <!--分页条-->
                      <div style="width: 50%; margin: 0 auto">
                        <el-pagination
                          class="pagination"
                          style="padding-top: 15px"
                          @size-change="handleSizeChange1"
                          @current-change="handleCurrentChange1"
                          :current-page="current"
                          :page-sizes="[6, 10, 20, 30]"
                          :page-size="size"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total">
                        </el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="新旧程度" name="goodNew">
                    <div>
                      <el-row>
                        <el-col :span="8" v-for="(good,index) in goodList" :key="index">
                          <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img :src="good.imgurl" @click="toDetail(good,index)" style="width: 90%;margin-top: 10px;margin-left:14px;height: 250px">
                            <div style="padding: 14px">
                              <span class="messages">{{good.goodName}}</span>
                              <span class="description">{{good.description}}</span>
                              <div class="bottom clearfix">
                                <div class="good-item">
                                  ￥{{good.rentPriceHour}}/小时~￥{{good.rentPriceDay}}/天
                                </div>
                                <!--<el-button type="text" class="button">操作按钮</el-button>-->
                              </div>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                    <div>
                      <!--分页条-->
                      <div style="width: 50%; margin: 0 auto">
                        <el-pagination
                          class="pagination"
                          style="padding-top: 15px"
                          @size-change="handleSizeChange2"
                          @current-change="handleCurrentChange2"
                          :current-page="current"
                          :page-sizes="[6, 10, 20, 30]"
                          :page-size="size"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total">
                        </el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="上新" name="goodNewTime">
                    <div>
                      <el-row>
                        <el-col :span="8" v-for="(good,index) in goodList" :key="index">
                          <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img :src="good.imgurl" @click="toDetail(good,index)" style="width: 90%;margin-top: 10px;margin-left:14px;height: 250px">
                            <div style="padding: 14px">
                              <span class="messages">{{good.goodName}}</span>
                              <span class="description">{{good.description}}</span>
                              <div class="bottom clearfix">
                                <div class="good-item">
                                  ￥{{good.rentPriceHour}}/小时~￥{{good.rentPriceDay}}/天
                                </div>
                                <!--<el-button type="text" class="button">操作按钮</el-button>-->
                              </div>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                    <div>
                      <!--分页条-->
                      <div style="width: 50%; margin: 0 auto">
                        <el-pagination
                          class="pagination"
                          style="padding-top: 15px"
                          @size-change="handleSizeChange3"
                          @current-change="handleCurrentChange3"
                          :current-page="current"
                          :page-sizes="[6, 10, 20, 30]"
                          :page-size="size"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total">
                        </el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Main_footer style="margin:0 auto"></Main_footer>
    </div>
</template>

<script>
  import Main_header from '../../components/main/Main_header'
  import Main_footer from '../../components/main/Main_footer'
  export default {
    name: 'StoreGood',
    components: {
      Main_footer,
      Main_header,
    },
    data(){
      return{
        goodList:[],
        // 每页显示的条数
        size: 6,
        // 总条数
        total: 100,
        // 当前页码
        current:1,
        uploadStatus:true,
        storeList:[],
        store:{},
        activeName:'allGood',
        changeTab:'',
      }
    },
    mounted(){
      this.initStoreGood();
    },
    methods:{
      // 当每页条数改变时
      handleSizeChange(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.initStoreGood();
      },
      // 当每页码数改变时
      handleCurrentChange(val) {
        // 将val重新复制给current
        this.current=val;
        this.initStoreGood();
      },
      // 当每页条数改变时
      handleSizeChange1(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.goodList=[]
        // 根据用户id查询全部商品
        let routerParams = this.$route.params.name;
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+1+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      // 当每页码数改变时
      handleCurrentChange1(val) {
        // 将val重新复制给current
        this.current=val;
        // 重新去后台查询数据
        this.goodList=[]
        // 根据用户id查询全部商品
        let routerParams = this.$route.params.name;
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+1+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      // 当每页条数改变时
      handleSizeChange2(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        // 重新去后台查询数据
        this.goodList=[]
        // 根据用户id查询全部商品
        let routerParams = this.$route.params.name;
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+2+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      // 当每页码数改变时
      handleCurrentChange2(val) {
        // 将val重新复制给current
        this.current=val;
        // 重新去后台查询数据
        this.goodList=[]
        // 根据用户id查询全部商品
        let routerParams = this.$route.params.name;
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+2+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      // 当每页条数改变时
      handleSizeChange3(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        // 重新去后台查询数据
        this.goodList=[]
        // 根据用户id查询全部商品
        let routerParams = this.$route.params.name;
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+3+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      // 当每页码数改变时
      handleCurrentChange3(val) {
        // 将val重新复制给current
        this.current=val;
        // 重新去后台查询数据
        this.goodList=[]
        // 根据用户id查询全部商品
        let routerParams = this.$route.params.name;
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+3+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      // 传递参数到detail页面
      toDetail(good,index) {
        this.$router.replace({
          path: '/detail',
          name: 'Detail',
          params: {
            name: good.goodId,
          }
        })
      },
      initStoreGood(){
        // 取到路由带过来的参数
        let routerParams = this.$route.params.name;
        // 根据用户id查询商铺信息
        this.getRequest('/good/data/oneStore/' + routerParams).then(resp => {
          if (resp) {
            this.store = resp;
          }
        })
        // 根据用户id查询全部商品
        let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+''+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      handleClick(tab) {
        this.changeTab=tab
        let routerParams = this.$route.params.name;
        if(tab.name === "allGood") {
          this.goodList=[]
          // 根据用户id查询全部商品
          let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+''+'&&current='+this.current+'&&size='+this.size;
          this.postRequest(url).then(resp => {
            if (resp) {
              this.goodList = resp.records;
              this.total=resp.total;
            }
          })
        } else if(tab.name === "goodPrice") {
          this.goodList=[]
          // 根据用户id查询全部商品
          let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+1+'&&current='+this.current+'&&size='+this.size;
          this.postRequest(url).then(resp => {
            if (resp) {
              this.goodList = resp.records;
              this.total=resp.total;
            }
          })
        }else if(tab.name === "goodNew"){
          this.goodList=[]
          // 根据用户id查询全部商品
          let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+2+'&&current='+this.current+'&&size='+this.size;
          this.postRequest(url).then(resp => {
            if (resp) {
              this.goodList = resp.records;
              this.total=resp.total;
            }
          })
        }else{
          this.goodList=[]
          // 根据用户id查询全部商品
          let url = '/good/data/page_rent/?userId='+routerParams+'&&uploadStatus='+1+'&&orderBy='+3+'&&current='+this.current+'&&size='+this.size;
          this.postRequest(url).then(resp => {
            if (resp) {
              this.goodList = resp.records;
              this.total=resp.total;
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .common{
    width: 70%;
    margin: 50px auto;
  }
  .content{
    width: 100%;
  }
  .contentImg{
    width: 100%;
  }
  .goodcontent{
    width: 100%;
    height: 900px;
    /*background-color: lavenderblush;*/
  }
  .goodleft{
    float: left;
    width: 20%;
    height: 900px;
    /*background-color: #1a1a1a;*/
  }
  .goodright{
    float: right;
    width: 80%;
    height: 900px;
    /*background-color: #e664ce;*/
  }
  .times {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
